<template>
    <div id="app" :class="currentTheme">
      <!-- 动态顶部导航栏 -->
      <TopNavbar 
        v-if="showTopNav" 
        :visible="showTopNav"
        :title="navTitle"
        :show-back="showBackButton"
        :show-logo="showLogo"
        :show-settings="showSettingsButton"
        :show-language="showLanguageButton"
        :show-user="showUserButton"
        @show-settings="showSettingsPanel = true"
        @show-locale-picker="showLocalePicker = true"
      />
      
      <!-- 路由视图 -->
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
      
      <!-- 动态底部标签栏 -->
      <Tabbar v-if="showTabbar" :visible="showTabbar" />
      
      <!-- 全局加载提示 -->
      <van-overlay :show="loading" class-name="global-loading">
        <div class="loading-content">
          <van-loading size="24px" vertical color="var(--primary-color)">
            {{ $t('common.loading') }}
          </van-loading>
        </div>
      </van-overlay>
      
      <!-- 全局消息通知 -->
      <van-notify v-model:show="showNotify" type="primary" position="top">
        {{ notifyMessage }}
      </van-notify>
      
      <!-- 设置面板 -->
      <van-popup v-model:show="showSettingsPanel" position="right" :style="{ width: '70%', height: '100%' }">
        <div class="settings-panel">
          <h2>{{ $t('common.settings') }}</h2>
          <van-cell :title="$t('common.changeLanguage')" is-link @click="showLocalePicker = true">
            <template #value>
              {{ currentLocale === 'zh-CN' ? '中文' : 'English' }}
            </template>
          </van-cell>
          <van-cell :title="$t('common.changeTheme')" is-link @click="toggleTheme">
            <template #value>
              {{ currentTheme === 'light' ? $t('common.lightTheme') : $t('common.darkTheme') }}
            </template>
          </van-cell>
          <van-cell :title="$t('common.logout')" is-link @click="handleLogout" />
        </div>
      </van-popup>
      
      <!-- 语言选择器 -->
      <van-popup v-model:show="showLocalePicker" position="bottom" round>
        <van-picker
          :columns="localeOptions"
          @confirm="onLocaleConfirm"
          @cancel="showLocalePicker = false"
        />
      </van-popup>
    </div>
  </template>
  
  <script setup>
  import { ref, computed, watch } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { useI18n } from 'vue-i18n';
  import { useThemeStore } from '@/stores/theme';
  import { useLocaleStore } from '@/stores/locale';
  import { useUserStore } from '@/stores/user';
  import TopNavbar from '@/components/TopNavbar.vue';
  import Tabbar from '@/components/Tabbar.vue';
  
  const { t } = useI18n();
  const route = useRoute();
  const router = useRouter();
  const themeStore = useThemeStore();
  const localeStore = useLocaleStore();
  const userStore = useUserStore();
  
  // 响应式状态
  const loading = ref(false);
  const showNotify = ref(false);
  const notifyMessage = ref('');
  const showSettingsPanel = ref(false);
  const showLocalePicker = ref(false);
  
  // 计算属性
  const currentTheme = computed(() => themeStore.currentTheme);
  const currentLocale = computed(() => localeStore.currentLocale);
  
  // 导航控制
  const showTopNav = computed(() => route.meta.showTopNav ?? true);
  const showTabbar = computed(() => route.meta.showTabbar ?? true);
  const navTitle = computed(() => route.meta.title || '');
  const showBackButton = computed(() => route.meta.showBackButton ?? false);
  const showLogo = computed(() => route.meta.showLogo ?? false);
  const showSettingsButton = computed(() => route.meta.showSettingsButton ?? false);
  const showLanguageButton = computed(() => route.meta.showLanguageButton ?? false);
  const showUserButton = computed(() => route.meta.showUserButton ?? false);
  
  // 语言选项
  const localeOptions = [
    { text: '中文', value: 'zh-CN' },
    { text: 'English', value: 'en-US' }
  ];
  
  // 方法
  const toggleTheme = () => {
    themeStore.toggleTheme();
  };
  
  const onLocaleConfirm = (value) => {
    localeStore.setLocale(value.value);
    showLocalePicker.value = false;
    showToast(t('common.languageChanged'));
  };
  
  const showToast = (message) => {
    notifyMessage.value = message;
    showNotify.value = true;
    setTimeout(() => {
      showNotify.value = false;
    }, 3000);
  };
  
  const handleLogout = () => {
    userStore.logout();
    showSettingsPanel.value = false;
    router.push('/login');
    showToast(t('common.logoutSuccess'));
  };
  
  // 监听网络状态
  window.addEventListener('online', () => {
    showToast(t('common.networkRestored'));
  });
  
  window.addEventListener('offline', () => {
    showToast(t('common.networkOffline'));
  });
  </script>
  
  <style lang="scss">
  @import '@/assets/styles/index.scss';
  
  #app {
    max-width: 500px;
    margin: 0 auto;
    min-height: 100vh;
    position: relative;
    background-color: var(--bg-color);
    overflow-x: hidden;
  }
  
  // 路由切换动画
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.3s ease;
  }
  
  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }
  
  // 全局加载样式
  .global-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.4);
    
    .loading-content {
      text-align: center;
      color: white;
      
      .van-loading__text {
        color: white;
        margin-top: 8px;
      }
    }
  }
  
  // 全局滚动条样式（仅支持Webkit浏览器）
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  
  ::-webkit-scrollbar-track {
    background: var(--card-bg);
  }
  
  ::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 3px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: var(--primary-light);
  }
  
  // Vant组件全局样式覆盖
  .van-cell {
    background-color: var(--card-bg)!important;
    color: var(--text-color)!important;
    
    &::after {
      border-bottom-color: var(--border-color)!important;
    }
  }
  
  .van-field__control {
    color: var(--text-color)!important;
  }
  
  .van-button--primary {
    background-color: var(--primary-color)!important;
    border-color: var(--primary-color)!important;
  }
  
  .van-popup {
    background-color: var(--card-bg)!important;
    color: var(--text-color)!important;
  }
  
  .van-picker {
    background-color: var(--card-bg)!important;
    color: var(--text-color)!important;
    
    &__toolbar {
      background-color: var(--card-bg)!important;
      border-bottom: 1px solid var(--border-color)!important;
    }
    
    &__confirm,
    &__cancel {
      color: var(--primary-color)!important;
    }
  }
  </style>